// web端样式
.web-container {

    .section_content {
        margin: 180px 0px;

        .userBox {
            display: flex;

            // 左侧菜单栏
            .leftMenu {
                margin-right: 160px;

                .topUser {
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .UserMsg {
                        margin-top: 14px;
                        font-weight: 500;
                        font-size: 20px;
                        color: #555555;
                        cursor: pointer;
                    }
                }

                .bottomVip {
                    margin-top: 100px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .vipItem {
                        font-weight: 500;
                        font-size: 20px;
                        color: #202020;
                        margin-bottom: 30px;
                        cursor: pointer;
                    }
                }
            }

            // 右侧展示区域
            .rightMsg {
                width: 1230px;

                // 个人信息
                .userMsg {
                    background-color: #FFFFFF;
                    border-radius: 20px;
                    padding: 50px 52px;

                    .msgBox {
                        display: flex;
                        flex-wrap: wrap;
                    }

                    .msgBoxItem {
                        width: 50%;

                        .itemBox {
                            margin-bottom: 20px;

                            .msgTitle {
                                font-weight: 500;
                                font-size: 14px;
                                color: #202020;
                                margin-bottom: 10px;
                            }

                            :deep .el-input__inner {
                                border-top: none;
                                border-left: none;
                                border-right: none;
                                border-bottom: 1px solid #F6F6F6;
                            }
                        }
                    }

                    .submit {
                        width: 70px;
                        height: 36px;
                        background: #0D99FF;
                        border-radius: 4px 4px 4px 4px;
                        border: 1px solid #E7ECF3;
                        margin: auto;
                        text-align: center;
                        line-height: 36px;
                        font-weight: 500;
                        font-size: 14px;
                        color: #FFFFFF;
                        cursor: pointer;
                    }
                }

                // 会员等级
                .msgItem {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;

                    .firstItem {
                        width: 40%;
                        display: flex;
                        justify-content: space-between;
                        padding: 50px;
                        border-radius: 20px;
                        background-color: #ffff;
                        margin-bottom: 40px;

                        .left {
                            .pageH3 {
                                margin-bottom: 13px;
                            }
                        }

                        .right {
                            width: 45px;
                            height: 45px;
                            margin-top: 133px;
                        }
                    }
                }

                // 会员充值
                .moneyItem {

                    .pageH3 {
                        margin-bottom: 20px;
                    }

                    // 選擇充值類型
                    .type {
                        display: flex;
                        justify-content: space-between;
                        margin-bottom: 40px;

                        .typeItem {
                            display: flex;
                            justify-content: space-between;
                            width: 25%;
                            background: #FFFFFF;
                            border-radius: 20px;
                            padding: 27px 40px;
                            cursor: pointer;

                            .typeName {
                                display: flex;
                                width: 100px;
                                border-right: 1px solid #E7ECF3;
                                justify-content: center;
                                align-items: center;

                                p {
                                    width: 20px;
                                    font-weight: 500;
                                    font-size: 20px;
                                    color: #202020;
                                }
                            }

                            .typeMoney {
                                display: flex;
                                flex-direction: column;
                                align-items: center;

                                .top {
                                    .money {
                                        font-weight: 800;
                                        font-size: 100px;
                                        color: #FF2E3C;
                                    }

                                    span {
                                        font-weight: 800;
                                        font-size: 16px;
                                        color: #555555;
                                    }
                                }

                                .bottom {
                                    font-weight: 400;
                                    font-size: 16px;
                                    color: #000000;
                                }
                            }
                        }
                    }

                    // 選擇支付方式付款
                    .pay {
                        display: flex;
                        margin-bottom: 40px;

                        .payItem {
                            margin-right: 40px;
                            display: flex;
                            flex-direction: column;
                            align-items: center;

                            .er {
                                width: 201px;
                                height: 201px;
                                background-color: #000000;
                                margin-bottom: 11px;
                            }

                            .payTitle {
                                font-weight: 500;
                                font-size: 16px;
                                color: #999999;
                            }
                        }
                    }

                    // 充值说明
                    .explain {
                        .explainItem {
                            margin-bottom: 10px;
                            font-weight: 500;
                            font-size: 16px;
                            color: #999999;
                        }
                    }
                }
            }
        }
    }
}

// mobile端样式
.mobile-container {
    .red {
        width: 100%;
        height: 66px;
        background-color: #870C08;
        position: relative;
    }

    .section_content {


        .userBox {

            // 左侧菜单栏
            .leftMenu {
                width: 100%;
                background-color: #FFFFFF;

                .topUser {
                    display: flex;
                    align-items: center;
                    position: absolute;
                    padding-left: 16px;
                    top: 70px;
                    width: 90%;
                    height: 120px;
                    border-radius: 10px;
                    background-color: #FFFFFF;
                    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.04);

                    .UserMsg {
                        margin-top: 14px;
                        font-weight: 500;
                        font-size: 12px;
                        color: #555555;
                        cursor: pointer;
                    }
                }

                .bottomVip {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 90px auto;
                    width: 232px;
                    height: 36px;
                    background: #F5F5F7;
                    border-radius: 27px;

                    .activeVipItem {
                        width: 116px;
                        height: 36px;
                        text-align: center;
                        line-height: 36px;
                        background-color: #333333;
                        border-radius: 27px;
                        color: #ffff;
                    }

                    .vipItem {
                        width: 116px;
                        height: 36px;
                        text-align: center;
                        line-height: 36px;
                        border-radius: 27px;
                    }
                }
            }

            // 右侧展示区域
            .rightMsg {
                width: 100%;
                margin-top: -60px;

                // 个人信息
                .userMsg {
                    background-color: #FFFFFF;
                    border-radius: 20px;
                    padding: 50px 52px;

                    .msgBox {
                        display: flex;
                        flex-wrap: wrap;
                    }

                    .msgBoxItem {
                        width: 50%;

                        .itemBox {
                            margin-bottom: 20px;

                            .msgTitle {
                                font-weight: 500;
                                font-size: 14px;
                                color: #202020;
                                margin-bottom: 10px;
                            }

                            :deep .el-input__inner {
                                border-top: none;
                                border-left: none;
                                border-right: none;
                                border-bottom: 1px solid #F6F6F6;
                            }
                        }
                    }

                    .submit {
                        width: 70px;
                        height: 36px;
                        background: #0D99FF;
                        border-radius: 4px 4px 4px 4px;
                        border: 1px solid #E7ECF3;
                        margin: auto;
                        text-align: center;
                        line-height: 36px;
                        font-weight: 500;
                        font-size: 14px;
                        color: #FFFFFF;
                        cursor: pointer;
                    }
                }

                // 会员等级
                .msgItem {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;

                    .firstItem {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        padding: 16px;
                        border-radius: 10px;
                        background-color: #FAFAFA;
                        margin-bottom: 16px;

                        .left {
                            .pageH3 {
                                margin-bottom: 13px;
                            }
                        }

                        .right {
                            width: 45px;
                            height: 45px;
                            margin-top: 80px;
                        }
                    }
                }

                // 会员充值
                .moneyItem {

                    .pageH3 {
                        margin-bottom: 20px;
                    }

                    // 選擇充值類型
                    .type {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;
                        margin-bottom: 16px;

                        .typeItem {
                            display: flex;
                            flex-direction: column-reverse;
                            width: 38%;
                            background: #FAFAFA;
                            margin-bottom: 16px;
                            margin-right: 9px;
                            border-radius: 20px;
                            padding: 16px;
                            cursor: pointer;

                            .typeName {
                                display: flex;
                                justify-content: center;
                                align-items: center;

                                p {
                                    font-weight: 500;
                                    font-size: 14px;
                                    color: #202020;
                                }
                            }

                            .typeMoney {
                                display: flex;
                                flex-direction: column;
                                align-items: center;

                                .top {
                                    .money {
                                        font-weight: 800;
                                        font-size: 30px;
                                        color: #FF2E3C;
                                    }

                                    span {
                                        font-weight: 800;
                                        font-size: 12px;
                                        color: #555555;
                                    }
                                }

                                .bottom {
                                    font-weight: 400;
                                    font-size: 12px;
                                    color: #000000;
                                }
                            }
                        }
                    }

                    // 選擇支付方式付款
                    .pay {
                        // height: 108px;
                        background: #FAFAFA;
                        border-radius: 10px;
                        margin-bottom: 16px;
                        padding: 16px;
                        box-sizing: border-box;

                        .payItem {
                            border-bottom: 1px solid #EEEEEE;
                            padding: 5px 0px;
                            box-sizing: border-box;
                            display: flex;
                            align-items: center;

                            .er {
                                margin-bottom: 11px;
                            }

                            .payTitle {
                                font-weight: 500;
                                font-size: 16px;
                                color: #999999;
                            }
                        }

                        .payItem:last-child {
                            border: none;
                        }
                    }

                    // 充值说明
                    .explain {
                        .explainItem {
                            margin-bottom: 10px;
                            font-weight: 500;
                            font-size: 12px;
                            color: #999999;
                        }
                    }
                }
            }
        }
    }
}

// ipad端样式
.ipad-container {}